<script setup lang="ts">
  import { ref } from 'vue';
  
  const arr = Array.from({length: 100}, (_, i) => i + 1)
  
  const colors = arr.map(() => {
    return {
      red: ref(0),
      blue: ref(0),
      green: ref(0)
    };
  });
  
   setInterval(() => {
    colors.forEach(color => {
      color.red.value = Math.floor(Math.random() * 255);
      color.blue.value = Math.floor(Math.random() * 255);
      color.green.value = Math.floor(Math.random() * 255);
    });
  }, 1000);
  </script>
  
  <template>
    <router-link to="/">Home</router-link>
  <div class="container">
    <div v-for="(i,index) in arr" :key="i" class="point" :style="{'--red': colors[index].red.value, '--green': colors[index].green.value, '--blue': colors[index].blue.value}" />
  </div>
  </template>
  
  <style scoped lang="scss">
  @use "sass:math";
  
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  } 
  
  .point{
    background-color: rgb(var(--red),var(--green),var(--blue));
    // background-color: rgb(100, 200, 40);
    // background-color: red;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    animation: move 1s linear infinite alternate;
  }
  
  @keyframes move {
    0% {
      transform: translate(0,0);
    }
 
    100% {
      transform: translate(0,200px);
    }
  }
  @for $i from 1 through 100 {
    .point:nth-child(#{$i}) {
      animation-delay: #{math.div(math.random(1000),1000) + 1}s;
      animation-duration: #{math.div(math.random(2000),1000) + 1}s;
    }
  }
  </style>
  